<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="false" title="首页"></my-header>
		
		<view>
			<view class="main-zhong4 yinying">
				<view class="dis_flex jus-cen fon-siz-15">恒鑫驰远成都信息科技有限公司</view>
				<view class="dis_flex jus-cen fon-siz-18 fon-wei-bol mar-top-10">OA管理系统</view>
			</view>
			<!--图形功能-->
			<view class="main-zhong3 yinying">
				<view class="dis_flex ali-ite mar-lef-20">
					<view><u-icon size="36" :name="imgurl+'oa-shouye-shuju.png'"></u-icon></view>
					<view class="dabiaoti mar-lef-5">数据中心</view>
				</view>
				<view class="dis_flex jus-end ali-ite mar-bot-10" >
					<view class="posi-upda2">
						<u-tag size="mini" @click="riqixuanze2(1)" text="日" mode="light" :type="typeyi_ri" />
						<u-tag size="mini" style="margin-left:5px;" @click="riqixuanze2(2)" text="月" mode="light" :type="typeyi_yue" />
						<u-tag size="mini" style="margin-left:5px;" @click="riqixuanze2(3)" text="年" mode="light" :type="typeyi_nian" />
					</view>
				</view>
				<view class="charts-box">
				  <qiun-data-charts
					type="demotype"
					:chartData="chartData"
					:inScrollView="true"
					:disableScroll="true"
					background="none"
					:ontouch="true"
				  />
					<!-- :canvas2d="true"
					canvasId="canvasColumn" 
					id="canvasColumn" -->
				</view>
				<view class="dis_flex mar-lef-20">
					<u-tag size="mini" text="公司" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="乐山" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="海口" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="乐山" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="海口" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="乐山" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="海口" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="乐山" mode="dark" :type="quyu" />
					<u-tag size="mini" style="margin-left:5px;" text="海口" mode="dark" :type="quyu" />
				</view>
			</view>
			<view class="main-zhong yinying">
				<view class="dis_flex ali-ite mar-bot-20">
					<u-icon size="36" :name="imgurl+'oa-shouye-laba.png'"></u-icon>
					<view class="dabiaoti mar-lef-5">消息中心</view>
				</view>
				<!-- <view class="dabiaoti mar-bot-20">消息中心</view> -->
				<view class="dis_flex jus-con text-align">
					<view @click="jump()" class="dis_flex fle-flo ali-ite">
						<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-shenpi.png'">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="zt-huise" style="margin-top:10px;">审批</view>
					</view>
					<view @click="jump()" class="dis_flex fle-flo ali-ite">
						<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-hezuohuoban.png'">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="zt-huise" style="margin-top:10px;">合作伙伴</view>
					</view>
					<view @click="jump()" class="dis_flex fle-flo ali-ite">
						<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-xingzheng.png'">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="zt-huise" style="margin-top:10px;">公司行政</view>
					</view>
				</view>
			</view>
			<view class="main-zhong yinying">
				<view class="dis_flex ali-ite mar-bot-20">
					<u-icon size="36" :name="imgurl+'oa-shouye-guanli.png'"></u-icon>
					<view class="dabiaoti mar-lef-5">管理中心</view>
				</view>
				<!-- <view class="dabiaoti mar-bot-20">管理中心</view> -->
				<view class="text-align2">
					<view class="dis_flex jus-con mar-bot-20">
						<view @click="navigateTo('/pages/finance/index/finance-home')" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-caiwuguanli.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">财务管理</view>
						</view>
						<view @click="navigateTo('/pages/team/index')" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-tuanduiguanli.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">团队管理</view>
						</view>
						<view @click="navigateTo('/pages/partner/index')" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-hezuohuobanguanli2.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">合作伙伴管理</view>
						</view>
					</view>
					<view class="dis_flex jus-con">
						<view @click="navigateTo('/pages/apply/add')" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-faqishenqing.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">发起申请</view>
						</view>
						<view @click="jump()" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-faqibaoxiao.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">发起报销</view>
						</view>
						<view @click="navigateTo('/pages/partner/add')" class="dis_flex fle-flo ali-ite">
							<u-image width="30px" height="30px" :src="imgurl+'oa-shouye-tianjiahuohezuoban.png'">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="zt-huise" style="margin-top:10px;">添加合作伙伴</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-footer :config="config"></my-footer> 
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	import myFooter from '@/components/workbench/footer.vue';
	export default {
		data() {
			return {
				background	: {
					backgroundColor: ' ',
				},
				quyu		: 'success',
				typeyi_ri	: 'success',
				typeyi_yue	: 'success',
				typeyi_nian	: 'success',
				chartData:{
				  "categories": [
					  "2016",
					  "2017",
					  "2018",
					  "2019",
					  "2020",
					  "2021"
				  ],
				  "series": [
					  {
						  "name": "收入",
						  "data": [
							  35,
							  8,
							  25,
							  37,
							  4,
							  20
						  ]
					  },
					  {
						  "name": "支出",
						  "data": [
							  70,
							  40,
							  65,
							  100,
							  44,
							  68
						  ]
					  },
					  {
						  "name": "利润",
						  "data": [
							  100,
							  80,
							  95,
							  150,
							  112,
							  132
						  ]
					  }
				  ]
				},
				config : [
					{
						count : '',
					},
					{
						count : '',
					},
					{
						count : '',
					},
					{
						count : '',
					},
					{
						count : '',
					}
				], // 底部导航配置信息
			}
		},
		methods:{
		},
		// 下拉改变头部背景色
		// onPageScroll(res) {
		// 	if( res.scrollTop > 0 )
		// 	{
		// 		this.background.backgroundColor = '#005687';
		// 	}else{
		// 		this.background.backgroundColor = ' ';
		// 	}
		// },
		onLoad(){
			this.load();
			this.load_close();
		},
		components:{
			myHeader,
			myFooter   
		}
	}
</script>

<style>
	/* .u-navbar-fixed{
		background:#005687;
	} */
	.header-index{
		/* background:#005687; */
	}
	.text-align2{
		padding:0 20px;
	}
	.text-align{
		padding:0 40px ;
	}
	.zt-huise{
		color:#8a8a8a;
	}
	.main-zhong {
		width: 100%;
		border-radius: 8px;
		background: #fff;
		margin-top: 10px;
		padding:15px 20px 20px 20px;
	}
	.yinying {
		font-weight: bold;
		-moz-box-shadow: 2px 2px 10px #06c;
		-webkit-box-shadow: 2px 2px 10px #06c;
		box-shadow: 0 5px 10px 0 #313131;
	}
	.main-zhong3 {
		width: 100%;
		border-radius: 8px;
		background: #fff;
		margin-top: 10px;
		padding:15px 20px 10px 0px;
	}
	.main-zhong4 {
		width: 100%;
		border-radius: 8px;
		background: #fff;
		padding:15px 20px 10px 0px;
	}
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box{
	  width: 100%;
	  height:150px;
	}
	.main {
		padding:10px;
		position: relative;
		min-height:100vh;
		background-image: linear-gradient( #005687, #E4E4E5 );
	}
	page{
		height:100%;
	}
</style>
